<template>
  <div class="custom-table" v-loading="loading">
    <div v-if="!curCommunities.length" class="easy-container no-data">{{loading ? '':'暂无数据'}}</div>
    <list-item
      v-for="community in curCommunities"
      :key="community.id"
      :community="community"
      @leaveCommunity="leaveCommunity"
    />
  </div>
</template>

<script>
import ListItem from './list-item';

export default {
  name: 'JoinedList',
  components: { ListItem },
  props: {
    communities: Array,
    loading: Boolean,
  },
  data() {
    return {
      curCommunities: [],
    };
  },
  mounted() {
    this.curCommunities = this.communities;
  },
  methods: {
    leaveCommunity(community) {
      this.curCommunities.splice(this.curCommunities.indexOf(community), 1);
    },
  },
  watch: {
    communities(val) { this.curCommunities = val; },
  },
};
</script>

<style></style>
